<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
    <div id="data-loading">
        <div class="loading1"><img src="../images/loading.gif"></div>
    </div>
    <div class="vue">
        <div class="good1 aui-margin-t-10">
            <div class="good1-t">物品类型</div>
            <ul class="aui-tab good-tab" id="good-tab">
                <li class="aui-tab-item" v-for="item in goods_types" :class="{'aui-active':order.goods_type==item}" @click="setGoodsType(item)">{{item}}</li>
            </ul>
            <div class="good2">
                <div class="good2-t">可通过拍照对物品信息进行补充。避免配送过程中产生不必要的纠纷</div>
                <div class="photo-box aui-margin-t-15">
                    <div class="z_file" style="margin-bottom:10px;" @click="upload"></div>
                    <div class="photo-box1" id="pics">
                        <img :src="item" v-for="(item,index) in order.goods_pics2" @click="showBig(index)">
                    </div>
                </div>
            </div>
        </div>
        <ul class="aui-list aui-list-in aui-margin-t-10 deliv-time good-list bor-no">
            <li class="aui-list-item aui-list-item-arrow">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">物品重量</div>
                    <select class="aui-list-item-right" v-model="order.goods_weight">
              <option v-for="item in goods_weights">{{item}}</option>
            </select>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-arrow">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">物品价值</div>
                    <div class="aui-list-item-right">
                        <input type="number" onfocus="vObj.order.goods_value=''" v-model="order.goods_value">
                    </div>
                </div>
            </li>
        </ul>
        <ul class="aui-list aui-list-in aui-margin-t-10 deliv-time good-list bor-no" v-if="vehicle">
            <li class="aui-list-item aui-list-item-arrow">
                <div class="aui-list-item-inner bor-bn">
                    <div class="aui-list-item-title">配送工具</div>
                    <select class="aui-list-item-right" v-model="order.vehicle">
              <option v-for="item in vehicles">{{item}}</option>
            </select>
                </div>
            </li>
        </ul>
        <div class="aui-text-center">
            <div class="good-msg">为了您的合法权益，请确认物品信息是否属实。</div>
        </div>
    </div>
    <!--js-->
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript">
        apiready = function() {
            var photoBrowser = api.require('photoBrowser');
            vObj = new Vue({
                el: ".vue",
                data: {
                    goods_types: [],
                    goods_weights: [],
                    vehicles: [],
                    order: api.pageParam.order,
                    vehicle: api.pageParam.vehicle
                },
                methods: {
                    setGoodsType: function(type) {
                        this.order.goods_type = type;
                    },
                    upload: function() {
                        api.getPicture({
                            sourceType: 'camera',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            destinationType: 'url',
                            allowEdit: true,
                            quality: 50,
                            targetWidth: 1000,
                            targetHeight: 1000,
                            saveToPhotoAlbum: false
                        }, function(ret, err) {
                            if (ret) {
                                api.showProgress({
                                    title: '正在上传',
                                    text: '请稍候...',
                                    modal: false
                                });
                                app.request.post('Common/uploadImg', {
                                    type: 'order'
                                }, {
                                    image: ret.data
                                }, function(res) {
                                    if (res.code == 200) {
                                        vObj.order.goods_pics.push(res.data.path);
                                        vObj.order.goods_pics2.push(res.data.full_path);
                                    } else {
                                        app.error(res.message);
                                    }
                                    api.hideProgress();
                                });
                            } else {
                                app.error(err.msg);
                            }
                        });
                    },
                    showBig: function(index) {
                        photoBrowser.open({
                            images: vObj.order.goods_pics2,
                            activeIndex: index,
                            placeholderImg: 'widget://res/img/apicloud.png',
                            bgColor: '#000'
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.eventType == "click") {
                                    photoBrowser.close();
                                }
                            } else {
                                app.error(JSON.stringify(err));
                            }
                        });
                    },
                    confirm: function() {
                        if (this.vehicle) {
                            api.sendEvent({
                                name: 'confirmGoodsInfoListen',
                                extra: vObj.order
                            });
                        } else {
                            api.sendEvent({
                                name: 'confirmGoodsInfoListen2',
                                extra: vObj.order
                            });
                        }

                        api.closeWin({
                            name: 'goods_info'
                        });
                    }
                }
            });

            var config = app.api.config(function(data) {
                var business = data.business;
                vObj.goods_types = business.goods_type.split(',');
                vObj.goods_weights = business.goods_weight.split(',');
                vObj.vehicles = business.vehicle.split(',');
                app.request.finish(vObj);
            });
        }
    </script>
</body>

</html>
